<template>
	<view class="pb">
		<view class="btn-box">
			<view class="carts-left">
				<view class="left-item" @tap="emit('goShop')">
					<image src="/static/icon/productDetails/store.png" class="l-img"/>
					<view class="text"> 店铺 </view>
				</view>
				<view class="left-item" @tap="emit('goKF')">
					<image src="/static/icon/productDetails/kefu.png" class="l-img"/>
					<view class="text"> 客服 </view>
				</view>
				<view class="left-item num-box" @tap="emit('goCart')">
					<view class="num" v-if="num!=0"> {{num}} </view>
					<image src="/static/icon/productDetails/cart.png" class="l-img"/>
					<view class="text"> 购物车 </view>
				</view>
			</view>
			<view class="carts-right">
				<view class="right-btn" @tap="emit('addCart')"> 加入购物车 </view>
				<view class="right-btn" @tap="emit('goResult')"> 去结算 </view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps(['num'])
	const emit = defineEmits(['goShop', 'goCart', 'goKF', 'addCart', 'goResult'])
</script>

<style lang="scss" scoped>
	.pb {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.btn-box {
	  height: 58px;
	  position: fixed;
	  left: 0;
	  right: 0;
	  bottom: 0;
    z-index: 10;
	  display: flex;
	  align-items: center;
	  padding: 10px 12px;
	  background-color: #fff;
	  box-sizing: border-box;
	  .carts-left {
	    display: flex;
	    .left-item {
	      display: flex;
	      flex-direction: column;
	      color: #666666;
	      font-size: 12px;
	      margin-right: 20px;
	      align-items: center;
	      &:nth-last-of-type(1) {
	        margin-right: 0;
	      }
				.text {
					white-space: nowrap;
				}
	    }
			.num-box {
				position: relative;
				.num {
					position: absolute;
					top: 0;
					right: -50%;
					transform: translate(-50%, -50%);
					width: 16px;
					height: 16px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;
					font-size: 12px;
					font-weight: 500;
					border-radius: 50%;
					background: #F53F3F;
				}
			}
	    .l-img {
	      width: 22px;
	      height: 22px;
	    }
	  }
	  .carts-right {
	    margin-left: 10px;
	    flex: 1;
	    display: flex;
	    font-size: 16px;
	    justify-content: space-between;
	    .right-btn {
				flex: 1;
	      width: 100px;
	      height: 40px;
	      border-radius: 99px;
	      background: #F7BA1E;
	      color: #FFFFFF;
	      text-align: center;
	      line-height: 40px;
	      &:nth-last-of-type(1) {
	        background: #FF3B1E;
					margin-left: 10px;
	      }
	    }
	  }
	}
</style>